<!-- 筛选搜索 -->
<template>
    <el-card :body-style="{ padding: '10px' }" class="card-box">
        <div class="card-header">
            <div class="left">
                <el-icon :size="20">
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>

            <el-button class="button" text>重置</el-button>
        </div>
        <ul class="card-body">
            <li>
                <slot name="s1"></slot>
            </li>
            <!-- <li><span>账号/姓名:</span>
                <el-input v-model="inputVal" placeholder="订单编号" />
            </li> -->
        </ul>
    </el-card>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from 'vue'
</script>
<style lang='scss' scoped>
.card-box {
    margin-top: 20px;

    .card-header {
        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;

            span {
                margin-left: 10px;
            }
        }
    }

    .card-body {
        padding: 0 50px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        li {
            width: 50%;
            display: flex;
            align-items: center;

            :deep(.el-input) {
                width: 30%;
                margin-left: 20px;
            }
        }
    }
}
</style>